<template>
	<view class="contact-item" :class="{'tools-view-group__item tools-view-group__item_np ':contactType == 2,'st-contact-container':contactType == 1}"
	 v-show="true">
		<block v-if="contactType == 2">
			<text  @click="onTapContact" class="iconfont">&#xe6e1;</text>
			<text  @click="onTapContact" class="name">联系我们</text>
		</block>

		<block v-if="contactType == 1">
			<view  @click="onTapContact" class="st-contact-block">
				<view class="iconfont">&#xe680;</view>
				<view class="st-contact-block__txt">客服</view>
			</view>
		</block>

		<uni-popup ref="popup" type="bottom">
			<view class="contact-wrapper" :class="{'contact-wrapper-bottom': contactType == 2}">
				<view class="contact-group">
					<block v-for="(item, index) in linkTel" :key="index">
						<view class="contact-group__item" @click="onTapCall(item)">{{item}}</view>
					</block>
					<!-- #ifdef MP-WEIXIN -->
					<button class="contact-group__btn" type="default" open-type="contact">咨询客服</button>
					<!-- #endif -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "./uni-popup/uni-popup.vue"
	export default {
		name: "stcontact",
		components: {
			uniPopup
		},
		props: {
			contactType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				linkTel: []
			};
		},
		methods: {
			// 选择客服
			onTapContact(e) {
				let mobile = uni.getStorageSync('cfg_m_phone');
				this.linkTel = mobile.split(',');
				this.$refs.popup.open();
			},
			// 拨打电话
			onTapCall(item) {
				uni.makePhoneCall({
					phoneNumber: item,
					complete: () => {
						this.$refs.popup.close();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contact-item{
		width: 100% !important;
		padding: 0 !important;
	}
	.st-contact-container {
		height: 100%;
		text-align: center;
	}

	.st-contact-block {
		@extend .directionColumnJustify;
		width: 115rpx;
		height: 100%;
		color: #666;

		.iconfont {
			margin-bottom: 3rpx;
		}
	}

	/* #ifdef MP-WEIXIN */
	.tools-view-group__item {
		width: 100%;
		padding: 0 !important;
	}
	.tools-view-group__item_np{
		padding-top: 0;
		width: 100%;
	}
	/* #endif */
	
	.tools-view-group__item .iconfont {
		color: #89909b;
		font-size: 40rpx;
	}

	.tools-view-group__item .name {
		color: #555;
		display: block;
		margin-top: 2px;
		font-size: 12px;
	}

	.contact-wrapper {
		border-radius: 24rpx 24rpx 0 0;
		background-color: $uni-bg-color
	}
	/* #ifdef H5 */
	.contact-wrapper-bottom{
		margin-bottom: 98rpx;
	}
	/* #endif */
	
	.contact-group {
		&__item {
			padding: 28rpx 0;
			position: relative;
			font-size: $uni-font-size-lg;
			font-family: Arial, Helvetica, sans-serif;

			&:after {
				@include line
			}
		}

		&__btn {
			padding: 6rpx 0;
			font-size: $uni-font-size-lg !important;
			background-color: $uni-bg-color !important;
		}
	}
</style>
